.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}




.header{
     display: flex;
     .px2rem(height, 90);
//   height: 90px;
     align-items: center;
     background: linear-gradient(top,#f50000,#b40000);
     .left{
         .px2rem(padding-left, 20);
//       padding-left:10px ;
     }
     
     .center{
         flex: 1;
         .px2rem(font-size, 40);
//       font-size:40px;
         text-align: center; 
         color: white; 
     }
}



.section{
    
    
    .nav{
        display: flex;
        align-items: center;
        justify-content: center;
        .px2rem(height, 70);
//      height: 70px;
        .left{
//         padding:  5px 30px;
           .px2rem(padding-top, 5);
           .px2rem(padding-left, 30);
           .px2rem(padding-bottom, 5);
           .px2rem(padding-right, 30);
           background: linear-gradient(top, #a3a3a3,#5f5f5f); 
           border: 1px solid #5b5b5b;
//         border-radius: 5px;
           .px2rem(border-radius, 5);
//         font-size: 30px;
           .px2rem(font-size, 30);
        }
        
        .center{
//          padding:  5px 30px;
            .px2rem(padding-top, 5);
           .px2rem(padding-left, 30);
           .px2rem(padding-bottom, 5);
           .px2rem(padding-right, 30);
            background: linear-gradient(top, #e8e8e8,#b2b2b2); 
            border: 1px solid #5b5b5b;
//          margin: 0px 20px;
//          font-size: 30px;
//          border-radius: 5px;
           .px2rem(font-size, 30);
           .px2rem(margin-left, 20);
           .px2rem(border-radius, 5);
           .px2rem(margin-right, 20);
            
            span{
//              padding-left: 10px;
                .px2rem(padding-left, 10);
          
            }
        }
        
        .right{
//          padding:  5px 30px;
            .px2rem(padding-top, 5);
           .px2rem(padding-left, 30);
           .px2rem(padding-bottom, 5);
           .px2rem(padding-right, 30);
            background: linear-gradient(top, #e8e8e8,#b2b2b2); 
            border: 1px solid #5b5b5b;
//          font-size: 30px;
//          border-radius: 5px;
//          
           .px2rem(font-size, 30);
           .px2rem(border-radius, 5);
          
            span{
//              padding-left: 10px;
                .px2rem(padding-left, 10);
                
            }
        }
        
    }
    >div{
        display: none;
    }
    
    .nav-one{
        .heji{
            .px2rem(height, 40);
            .px2rem(line-height, 40);
            .px2rem(padding-left, 20);
            .px2rem(font-size,24);
//          height: 40px;
//          line-height: 40px;
//          padding-left: 20px;
//          font-size:24px;
        }
        
        &.show{
            display: block
        }
        
        .content{
            .list{
                display: flex;
                align-items: center;
                border-bottom: 1px solid darkgray;
                .left{
                    .px2rem(margin, 20);
//                  margin:20px  20px;
                }
                
                .center{
                    flex: 1;
                    p{
                        .px2rem(height, 36);
                        .px2rem(line-height, 36);
                        .px2rem(font-size, 20);
                        
//                      height: 36px;
//                      line-height: 36px;
//                      font-size: 24px;
                        &.blod{
                            font-weight: bold;
                        }
                        
                        &.line{
                            text-decoration: line-through;
                        }
                        
                        &.price{
                            .color{
                                color: #ff0000;
                            }
                        }
                    }
                    
                    
                }
                
                .right{
                   .px2rem(height, 45);
                   .px2rem(width, 85);
                   .px2rem(line-height, 45);
                   .px2rem(font-size, 24);
                   .px2rem(margin-right, 16);
                   .px2rem(border-radius, 8);
                   .px2rem(margin-top, 50);
//                  width: 85px;
//                  height: 43px;
//                  line-height: 43px;
                    text-align: center;
                    color: white;
//                  font-size: 24px;
//                  margin-right: 16px;
//                  border-radius: 8px;
//                  margin-top: 50px;
                    background: linear-gradient(top,#e30101,#b60000);
                }
            }
            
        }
        
        
        
    }
    
    
    .nav-two{
        &.show{
            display: block
        }
        
        .heji{
//          height: 40px;
//          line-height: 40px;
//          padding-left: 20px;
//          font-size:24px;
            
            .px2rem(height, 40);
            .px2rem(line-height, 40);
            .px2rem(padding-left, 20);
            .px2rem(font-size, 24);
        }
        .content{
            .list{
                display: flex;
                align-items: center;
                border-bottom: 1px solid darkgray;
                .left{
//                  margin:20px  20px;
                    .px2rem(margin, 30);
                }
                
                .center{
                    flex: 1;
                    p{
//                      height: 36px;
//                      line-height: 36px;
//                      font-size: 24px;
                        .px2rem(height, 36);
                        .px2rem(line-height, 36);
                        .px2rem(font-size, 24);
                        &.blod{
                            font-weight: bold;
                        }
                        
                        &.line{
                            text-decoration: line-through;
                        }
                        
                        &.price{
                            .color{
                                color: #ff0000;
                            }
                            .img{
                                .px2rem(padding-left, 20);
//                              padding-left: 20px;
                            }
                        }
                    }
                    
                    
                }
                
                
            }
            
        }
        
    }
    
    .nav-three{
        &.show{
            display: block
        }
        
        .heji{
            
//          height: 40px;
//          line-height: 40px;
//          padding-left: 20px;
//          font-size:24px;
            .px2rem(height, 40);
            .px2rem(line-height, 40);
            .px2rem(padding-left, 20);
            .px2rem(font-size, 24);
        }
        .content{
            .list{
                display: flex;
                align-items: center;
                border-bottom: 1px solid darkgray;
                .left{
//                  margin:20px  20px;
                    .px2rem(margin, 20);
                }
                
                .center{
                    flex: 1;
                    p{
//                      height: 36px;
//                      line-height: 36px;
//                      font-size: 24px;
                        
                        .px2rem(height, 36);
                        .px2rem(line-height, 36);
                        .px2rem(font-size, 24);
                        &.blod{
                            font-weight: bold;
                        }
                        
                        &.line{
                            text-decoration: line-through;
                        }
                        
                        &.price{
                            display: flex;
                            .color{
                                flex: 1;
                                color: #ff0000;
                            }
                            .right{
                              
                                text-align: center;
                                text-align: center;
                                color: white;
                                margin-right: 25%;
//                              width: 85px;
//                              height: 43px;
//                              line-height: 43px;
//                             
//                              font-size: 24px;

//                              border-radius: 8px;
                                
                               .px2rem(height, 45);
                               .px2rem(width, 85);
                               .px2rem(line-height, 45);
                               .px2rem(font-size, 24);
                               
                               .px2rem(border-radius, 8);
                               
                               
                                background: linear-gradient(top,#e30101,#b60000);
                                
                                
                            }
                        }
                    }
                    
                    
                }
                
                
                .right{
                     .px2rem(margin-right, 20);                             
//                 margin-right: 20px; 
                }
                
                
            }
            
        }

    }
    
    
    
    
}














.footer {
    position: fixed;
    width: 100%;
    .px2rem(bottom,0);
    .nav {
        margin: 0 auto;
        display: flex;
        background: black;
        li {
            flex: 1;
            display: flex;
            flex-direction: column;
            .px2rem(height,100);
            .px2rem(margin-top,5);
            .px2rem(margin-left,20);
            .px2rem(margin-right,20);
            .px2rem(margin-bottom,5);
            .px2rem(border-radius,5);
            align-items: center;
            .img {
                .px2rem(margin-top,5)
            }
            .title {
                text-align: center;
                color: white;
            }
            &.show {
                background: #6f6f6f;
            }
        }
    }
}









